<template>
    <div class="recsong-list">
        <!-- 顶部精品歌单 -->
        <Topsonglist :topsonglist="topsonglist"/>
        <!-- 标签导航 -->
        <div class="tagsnav" ref="tagsnav">
            <TagsNav :allTag="allTag" :hotTag="hotTag" @tagClick="tagClick"/>
        </div>
        <!-- 歌单列表 -->
        <div class="songlist">
            <SongList :playlists="songlist"/>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
                background
                :current-page="currentPage"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="songlistCount">
                </el-pagination>
        </div>
    </div>
</template>
<script>
import Topsonglist from './Childcomps/Topsonglist.vue'
import {getRandom} from '@/common/getRandom'
import TagsNav from '../../../components/content/TagsNav.vue'
import SongList from '@/components/content/songlist/SongList.vue';
export default {
    name: "",
    data() {
        return {
            // 精品歌单标签列表
            tags:[],
            topsonglist:[], //顶部精品歌单
            // 所有歌单标签
            allTag:[],
            // 热门标签
            hotTag:[],
            // 默认搜索歌单
            tagName:"华语",
            currentPage:1,
            songlist: [], //歌单列表
            songlistCount: 0, //歌单数量
            pageSize:48

        };
    },
    components: { Topsonglist, TagsNav, SongList },
    created() {
        // 获取所有歌单分类标签
        this.getAllTagBy();
        // 获取热门歌曲分类标签
        this.getHotTagBy();
        // 随机获取一个顶部精品歌单
        this.getTopHighQualityRandom();
        // 获取歌单列表
        this.getSongListBy(this.tagName,this.currentPage);
    },
    methods: {
        async getAllTagBy(){
            let resAllTag = await this.$API.recsonglist.getAllTag();
            if(resAllTag.code == 200){
                this.allTag = resAllTag.sub;
            }

        },
        async getHotTagBy(){
            let resHotTag = await this.$API.recsonglist.getHotTag();
            if(resHotTag.code == 200){
                this.hotTag = resHotTag.tags
            }
        },
        async getTopHighQualityRandom(){
            // 随机获取一个歌单的介绍
            let resTags = await this.$API.recsonglist.getTopHighqualityTag();
            if(resTags.code == 200){
                this.tags = resTags.tags;
                // 获取一个随机精品歌单标签
                let randomTag =  this.tags[getRandom(0,this.tags.length)].name;
                // 根据随机精品歌单标签，随机获取顶部精品歌单
                let resTop = await this.$API.recsonglist.getTopHighquality(randomTag);
                if(resTop.code == 200){
                    this.topsonglist = resTop.playlists;
                }
            }

        },
        async getSongListBy(tagName){
            let offset = (this.currentPage - 1) * this.pageSize;
            let resSongList = await this.$API.recsonglist.getSongList(tagName,offset);
            if(resSongList.code == 200){
                this.songlist = resSongList.playlists;
                 this.songlistCount = resSongList.total
            }
        },
        // tags标签导航事件的监听
        async tagClick(tagName){
            // 保存当前标签名
            this.tagName = tagName;
            // 根据标签名从新获取顶部精品歌单（单击的标签名可能不存在在精品标签里面，需要判断一下）
            if(this.tags.find(item =>  item.name == tagName)){
                let resTop = await this.$API.recsonglist.getTopHighquality(tagName);
                if(resTop.code == 200){
                    this.topsonglist = resTop.playlists;
                }
            }
            // 根据标签名获取歌单列表(默认取第一页数据)，如果当前不在第一页，点击完后应该让分页器调到第一页
            this.currentPage = 1;
            this.getSongListBy(tagName);

        },
        handleCurrentChange(page){
            this.currentPage = page
            this.getSongListBy(this.tagName)
        }
    },
   
}
</script>
<style lang="less" scoped>
    .tagsnav{
        margin-top: 10px;
    }
    .songlist{
        margin-top: 10px;
    }
    .pagination{
        width: 100%;
        text-align: center;
    }
</style>